<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
    <style>
      .title {
        color: red;
      }

      .font30 {
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 静态样式 -->
      <!-- <div class="title">我是一个标题</div> -->
      <!-- 
        class动态样式
          + 对象
            :class="{样式名:true/false}" true样式生效，false失效
          + 数组
            :class="['样式名']"

       -->
      <!-- <div :class="titleObj">我是一个标题</div> -->
      <!-- 
        vue2中v-bind绑定的动态属性它的优先级要低于静态属性
        vue3中v-bind绑定的动态属性它的优先级取决于静态的位置，如果写在动态属性左边则动态属性优先级高，写在右边则静态优先级高
       -->
      <!-- <div class="font30" :class="titleObj">我是一个标题</div> -->
      <!-- <div :class="{title:status}">我是一个标题</div>
      <button @click="setStatus">++++++++</button> -->

      <!-- <div :class="titleObj">我是一个标题</div>
      <button @click="addClassName">++++++++</button> -->

      <div :class="titleArr">我是一个标题</div>
      <button @click="addClassName">++++++++</button>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // titleObj: { title: true, font30: true }
            titleObj: { title: true },
            status: false,
            titleArr: ['title']
          }
        },
        methods: {
          setStatus() {
            this.status = true
          },
          addClassName() {
            // this.titleObj.font30 = true

            // 数组
            this.titleArr.push('font30')
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
